<style scoped>
.view-icons .active {
    background-color: #FF6575;
    border-color: #FF6575;
    color: #fff;
}

.view-icons a {
    align-items: center;
    background-color: #fff;
    border: 1px solid #D2DCEC;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    color: #000;
    display: inline-flex;
    font-size: 20px;
    justify-content: center;
    text-align: center;
    margin-right: 10px;
    width: 40px;
    height: 40px;
}
</style>
<template>
    <!-- 页面中的头部说明
    页面中的主题部分
      - 搜索区域
      - 列表区域
      - 翻页区域 -->
    <div class="">
        <div class="flex justify-between items-center">
            <div class="flex items-center">
                <div class="view-icons">
                    <a href="javascript:void(0);" class="grid-view active"><i class="feather-grid"></i></a>
                    <a href="javascript:void(0);" class="list-view"><i class="feather-list"></i></a>
                </div>
                <div class="show-result">
                    <p>显示 {{ total }} 中的 {{ 1 + (params.pageIndex - 1) * 10 }} ~ {{
                        (params.pageIndex - 1) * params.pageSize + list.length }} </p>
                </div>
            </div>
            <div>
                <slot name="search">xx</slot>
            </div>
        </div>

        <div v-if="loading"
            class="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-black bg-opacity-50 z-50">
            <div class="text-white text-2xl">Loading...</div>
        </div>

        <div class="box px-4 py-2 my-4">
            <!-- <h2>考试记录</h2>
            <div>
                <input type="text">
            </div> -->

            <table class="w-full table-auto text-left">

                <thead class="bg-gray-100">
                    <tr>
                        <th v-for="col in cols" :key="col.prop" class="py-4 ">
                            {{ col.label }}
                        </th>
                        <th class="py-4 ">
                            操作
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in list" :key="item.id" class="border-t border-gray-200">
                        <slot name="default" :scope="item">
                            <td v-for="col in cols" :key="col.label" class="py-4 ">
                                <slot :name="col.label" :item="item">
                                    {{
                                        col.prop.includes("-") ?
                                            (item[col.prop.split("-")[0]][col.prop.split("-")[1]]) :
                                            item[col.prop] }}
                                </slot>
                            </td>
                            <td v-if="$slots.op">
                                <slot name="op" :row="item">
                                    <span>操作</span>
                                </slot>
                            </td>
                            <td v-else>
                                <button @click="del(item.id)">删除</button>
                            </td>
                        </slot>
                    </tr>
                </tbody>
            </table>
        </div>


        <app-pagination :total="total" :current="params.pageIndex" @pageChange="pageChange" />

    </div>
</template>
<script setup>
import { onMounted } from 'vue';

const props = defineProps({
    opApi: {
        type: Object,
        required: true
    },
    cols: {
        type: Array,
        default: () => { }
    }
})
const list = ref([])
const total = ref(100)
const loading = ref(false)
const params = reactive({
    pageIndex: 1,
    pageSize: 10
})
const pageChange = async (e) => {
    params.pageIndex = e
    await search()
}

const del = async (id) => {
    // 弹框确认是否要删除？
    if (confirm("确定要删除吗？")) {
        if (props.opApi.del) {
            await props.opApi.del([id])
            search()
        }
    }

}
const search = async () => {
    loading.value = true
    try {
        const res = await props.opApi.getList(params)
        console.log(res)
        if ("list" in res) {
            list.value = res.list
        }
        // res.data.list ? list.value = res.data.list : list.value = res.list
        // list.value = res.data.list
        // list.value = [{
        //     id: 1,
        //     className: 'x',
        //     examName: 'x',
        //     startAt: 'xxxx-xx-xx'
        // }, {
        //     id: 2,
        //     className: 'x',
        //     examName: 'x',
        //     startAt: 'xxxx-xx-xx'
        // },
        // {
        //     id: 2,
        //     className: 'x',
        //     examName: 'x',
        //     startAt: 'xxxx-xx-xx'
        // },
        // {
        //     id: 2,
        //     className: 'x',
        //     examName: 'x',
        //     startAt: 'xxxx-xx-xx'
        // }, {
        //     id: 2,
        //     className: 'x',
        //     examName: 'x',
        //     startAt: 'xxxx-xx-xx'
        // }]
        if ('total' in res) {

            total.value = res.total
        } else if ('pager' in res) {
            total.value = res.pager.total
        }
        // total.value = 100

    } finally {
        loading.value = false
    }
}

onMounted(() => {
    search()
})

defineExpose({
    search
})

// const emit = defineEmits(['pageChange'])

</script>